<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>共享画布</title>
  <link type="text/css" rel="styleSheet" href="./test.css" />
</head>

<body>
  <div id="homePage">
    <img src="./img/home.jpg" id="img"><br />
    <input onchange="changeName()" id="name" placeholder="会议名称" /><br />
    <select id="selectTime" onchange="changeTime()">
      <option>0.5小时</option>
      <option>1小时</option>
      <option>2小时</option>
      <option>3小时</option>
      <option>5小时</option>
    </select>
    <div onclick="create()" id="create">创建会议</div>
    <input id="joinNum" placeholder="会议号" />
    <div onclick="join()" id="join">加入会议</div>
    <div id="find" onclick="find()">查询会议</div>
  </div>

  <script>
    const baseURL = '47.93.221.26:8080'
    let name = '';
    let time = 0.5;
    function changeName() {
      let inp = document.getElementById('name');
      name = inp.value;
    }
    function changeTime() {
      let sel = document.getElementById('selectTime');
      time = sel.value[0];
    }

    function find() {
      let xhr = new XMLHttpRequest();
      xhr.open('GET', "http://" + baseURL + "/room");
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          let { code, msg, data } = JSON.parse(xhr.response);
          let inner = '';
          for(let i = 0; i < data.length; i++) {
            inner += "<li>"+ data[i].id +"</li>"
          }
          let findUl = document.getElementById('find');
          findUl.innerHTML = inner;
        }
      }
    }

    function create() {
      let date = new Date();
      let nowTime = date.getTime();
      let endTime = nowTime + 60 * time * 60 * 1000;
      let year = date.getFullYear(),
        month = date.getMonth(),
        day = date.getDate(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds()
      let id = '' + year + (month + 1 < 10 ? '0' + month + 1 : month + 1) + (day < 10 ? '0' + day : day) + (hour < 10 ? '0' + hour : hour) + (min < 10 ? '0' + min : min) + (sec < 10 ? '0' + sec : sec);
      let startTime = year + '-' + (month + 1 < 10 ? '0' + month + 1 : month + 1) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec);
      function transformationTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d + ' ' + ' ' + h + ':' + minute + ':' + second;
      }
      endTime = transformationTime(endTime)

      let data = {
        'id': id,
        'name': name === '' ? '临时会议' : name,
        'startTime': startTime,
        'endTime': endTime,
        'delete': '0'
      }
      let xhr = new XMLHttpRequest();
      xhr.open('POST', "http://" + baseURL + "/room");
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify(data));
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          let { code, msg, data } = JSON.parse(xhr.response);
          if (code == 1) {
            let a = document.createElement('a');
            a.href = "http://" + baseURL + "/front/index.html?id=" + id;
            a.target = "_blank";
            a.click();
          } else {
            alert(msg)
          }
        }
      }
    }

    function join() {
      let joinNum = document.getElementById('joinNum');
      let xhr = new XMLHttpRequest();
      xhr.open('GET', "http://" + baseURL + "/room/" + (joinNum.value === '' ? 'null' : joinNum.value));
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          let { code, msg, data } = JSON.parse(xhr.response);
          if (code == 1) {
            let a = document.createElement('a');
            a.href = "http://" + baseURL + "/front/index.html?id=" + joinNum.value;
            a.target = "_blank";
            a.click();
          } else {
            alert(msg)
          }
        }
      }
    }
  </script>
</body>

</html>